<template>
  <view class="trip-item flex">
    <view class="trip-item__left">
      <view class="font36 c333 fw500">{{ option.mmdd }}</view>
      <view class="font28 c999 mgt8">{{ option.yyyy }}</view>
    </view>

    <view class="trip-item__right">
      <view class="flex align-center">
        <view class="c481 bold font32">{{ option.title || '-' }}</view>
        <view class="c333 font28" style="margin-left: 14rpx">
          {{ option.desc || '-' }}
        </view>

        <image
          @click.stop="$u.route('/pages-mine/trip/edit')"
          class="mglauto"
          v-if="!option.isHotel"
          style="width: 40rpx; height: 40rpx"
          src="@/static/icon/mine-edit-active.png"
        ></image>
      </view>

      <!--  -->
      <view class="mgt20 process">
        <view class="process-dot flex column align-center">
          <view class="process-dot__1"></view>
          <view class="process-dot__2"></view>
          <view class="process-dot__3"></view>
        </view>
        <view class="flex">
          <view class="c333 font28" style="min-width: 70rpx;" v-if="option.h1l">{{ option.h1l || '-'}}</view>
          <view class="c999 font24" :style="{
            'padding-left': option.h1l ? '20rpx' : ''
          }" v-if="option.h1r">{{ option.h1r }}</view>
        </view>

        <view class="mgt20 flex">
          <view class="c333 font28" style="min-width: 70rpx;" v-if="option.h2l">{{ option.h2l || '-'}}</view>
          <view class="c999 font24" :style="{
            'padding-left': option.h2l ? '20rpx' : ''
          }" v-if="option.h2r">{{ option.h2r }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    option: {
      type: Object,
      default: () => ({
        title: "到达",
        desc: "首都机场",
        h1l: "2022/01/01 12:12",
        // h1r: `你好`,
        h2l: "2022/01/01 12:12",
        // h2r: "是否送站",
        mmdd: "02/02",
        yyyy: "2023",
      }),
    },
    id: {
      type: String,
      default: ''
    }
  },
};
</script>

<style lang="scss" scoped>
.trip-item {
  position: relative;

  &-header {
    position: absolute;
    top: -40rpx;
    left: 50%;
    transform: translate(-50%, -100%);

    .header-item {
      &:not(:last-child) {
        margin-right: 176rpx;
      }

      .dot {
        width: 6rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: #dedede;
      }

      .line {
        height: 28rpx;
        width: 0;
        border-left: 2rpx dashed #999999;
      }
    }
  }

  &:first-child {
    .trip-item-header {
      display: none;
    }
  }

  &__left {
    margin-right: 80rpx;
  }

  &__right {
    flex: 1;
  }

  .process {
    padding-left: 78rpx;
    position: relative;

    &-dot {
      position: absolute;
      left: 26rpx;
      top: 0;
      height: 100%;
      padding: 14rpx 0;

      &__1 {
        width: 10rpx;
        height: 10rpx;
        border: 2rpx solid #ff661f;
        border-radius: 50%;
      }

      &__2 {
        flex: 1;
        border-left: 2rpx dashed #d8d8d8;
      }

      &__3 {
        width: 10rpx;
        height: 10rpx;
        background: #ff661f;
        border-radius: 50%;
      }
    }
  }
}
</style>
